<template>
  <div id="app" :class="skinColor">
    <div class="app-front" v-show="!loginShow">
      <template v-if="systemShow">
        <app-sidebar></app-sidebar>
        <div class="app-content" :style="contentStyle">
          <app-header></app-header>
          <keep-alive :include="includes">
            <router-view></router-view>
          </keep-alive>
          <!-- <router-view v-if="!$route.meta.keepAlive"></router-view> -->
        </div>
      </template>
      <template v-if="!systemShow">
        <router-view></router-view>
      </template>
    </div>
    <div class="app-back" v-if="loginShow">
      <app-login></app-login>
    </div>
  </div>
</template>

<script>
import appHeader from './views/common/appHeader'
import appSidebar from './views/common/appSidebar'
import appLogin from './views/common/appLogin'
import { mapState } from 'vuex'
import config from './config'

export default {
  components: {
    appHeader,
    appSidebar,
    appLogin
  },
  name: 'App',
  data () {
    return {
      contentStyle:
        'padding: ' +
        this.$base.getConst('common', 'headerHeight') +
        'px 0 0 ' +
        this.$base.getConst('common', 'sidebarWidth') +
        'px',
      skinColor: 'skin-' + config.skin
    }
  },
  created () {
    let t = this.$base.getSessionStorage('token')
    // 如果初始取不到token，则自动跳转到登录
    if (!t) {
      this.$store.commit('changeLoginShow', true)
    }
  },
  mounted () {
    $('body')
      .removeClass()
      .addClass(this.skinColor)
    this.$store.commit(
      'setWrapHeight',
      this.$base.getDocumentHeight() -
      this.$base.getConst('common', 'headerHeight')
    )
  },
  computed: mapState({
    loginShow: 'loginShow',
    systemShow: 'systemShow',
    includes: 'includes'
  })
}
</script>

<style>
.el-table td {
  text-align: center;
}
</style>
